<template>
  <el-row class="out-el-row">
    <el-col :span="19">
      <div class="typemsg-left">
        <el-row>
          <el-col :span="3">
            <img class="shishicai-icon" :src="lotteryLogo" alt="">
          </el-col>
          <el-col :span="10">
            <div class="typemsg-name-lucynum">
              <div class="typemsg-type-name">
                <p>
                  <span class="type-name">{{lotteryMessage.name}}</span>
                  <span class="
                red-color">{{lotteryMessage.short_expect}}</span>期&nbsp;每日&nbsp;
                  <span class="
                red-color">{{lotteryMessage.count}}</span>期&nbsp;今日剩余&nbsp;
                  <span class="
                red-color">{{lotteryMessage.remaining_num}}</span>期</p>
              </div>
              <div class="typemsg-luck-num typemsg-luck-numbj my_text_center">
                <ul>
                  <li v-for="(item,index) in lotteryMessage.open_code" :key='index' :style="{background: item.color}">{{item.number}}</li>
                </ul>
              </div>
              <div class="typemsg-help">
                <img class="email-icon" src="../../assets/imgs/email.png" alt="">
                <span class="help-text">新手必看：
                  <em @click="getdatahelp" class="how-play red-color">怎么玩？</em>
                </span>
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="cutting-line"></div>
          </el-col>
          <el-col :span="10">
            <div class="count-down">
              <div class="count-down-text">
                <p>距&nbsp;
                  <span class="
                red-color">{{countdownData.next_short_expect}}</span>&nbsp;期开奖剩</p>
              </div>
              <count-down :TypeMessage='countdownData'></count-down>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="typemsg-right">
        <div class="zhibo-bg-pic" @mouseover.stop="showPlay" @mouseout.stop="hiddenPlay">
          <img :src="toLivePicUrl" alt="">
          <div @click="toKjzb">
            <img v-show="isInPic" class="zhibo-play-pic" src="../../assets/imgs/play-icon.png" alt="" @mouseover.stop="showPlay" @mouseout.stop="hiddenPlay">
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountDown from "../cqssc/components/CountDown";
import getTypemessageData from "../../common/cpdt/getTypemessageData.js";

export default {
  components: {
    CountDown
  },
  mounted() {
    getTypemessageData(this)
  },
  data() {
    return {
      isInPic: false,
      lotteryMessage: {},
      countdownData: {},
      toLivePic: {},
      sscLogo: "",
      lotteryLogo: "",
      toLivePicUrl: ""
    };
  },
  watch: {
    getStore: function(data) {
      if(data.lottery_id == this.$route.params.caizhongID){
          this.countdownData = data.countdown_time;
          this.lotteryMessage = data.lotteryData;
          this.toLivePic = data.live;
      }
    },
    $route: "fetchData"
  },
  methods: {
    //跳转帮助中心
    getdatahelp(){
      let articleID = this.$store.state.articleID;
      this.$router.push(`/helpCenter/${articleID}`)
    },
    showPlay() {
      this.isInPic = true;
    },
    hiddenPlay() {
      this.isInPic = false;
    },
    // 跳转开奖直播
    toKjzb(){
      let lotteryid = this.$route.params.caizhongID;
      this.$router.push(`/live/${lotteryid}`)
    },
    fetchData() {
      if (this.$route.params.caizhongID) {
        getTypemessageData(this);
      }
    }
  },
  computed: {
    getStore() {
      return this.$store.state.TypeMessage;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/typemessage.less);
</style>


